Resolve route guard

כשאנחנו מקבלים מידע חיצוני, הפעולה יכולה לקחת זמן ובינתיים נטען עמוד ריק.

אנחנו רוצים שהעמוד לא יטען עד שלא יהיה בו כל המידע הנדרש.

יצירת ה-resolver:

ng generate r users

פונקצית ה-resolve מחזירה מידע. אנחנו רוצים את המידע הזה לפני שהעמוד נטען.

נקח את ה-service שאיתו אנחנו שולפים את המידע ונקבל את המידע בתוך ה-resolve.

user.service.ts

getAllUsers(): any{
    const userList = new Promise((resolve, reject) => {
      resolve(this.users);
    })
    return userList;
}

users.resolver

constructor(private userService: UserService){}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    return this.userService.getAllUsers().then(data => {
      return data;
    })
}

את ה-resolver צריך להוסיף ל-providers של ה-app.

השלב הבא יהיה להפעיל את ה-resolver על הנתיב המתאים.

app.module

{ path: 'users', component: AllUsersComponent, resolve: {users: UsersResolver} },

המשתנה users יחזיק את המידע שהתקבל מה-service.

כדי להשתמש בו בקומפוננטה:

all-users.component

users: Users[];

constructor(private userService: UserService, private route: ActivatedRoute) {}

ngOnInit(): void {
    this.users = this.route.snapshot.data['users'];
}